<template>
  <div class="practice-record">
    <!-- 搜索表单 -->
    <div class="search-form">
      <div class="form-item">
        <span class="label">答题时间：</span>
        <a-range-picker
          v-model:value="dateRange"
          @change="onDateChange"
          format="YYYY-MM-DD"
        />
      </div>
      <div class="form-item">
        <span class="label">是否正确：</span>
        <a-select v-model:value="queryParams.isRight" style="width: 120px">
          <a-select-option value="">全部</a-select-option>
          <a-select-option value="1">错误</a-select-option>
          <a-select-option value="0">正确</a-select-option>
        </a-select>
      </div>
      <div class="form-item">
        <a-button type="primary" @click="handleQuery">查询</a-button>
        <a-button style="margin-left: 8px" @click="resetQuery">重置</a-button>
      </div>
    </div>

    <!-- 数据列表 -->
    <div class="record-table">
      <div class="table-header">
        <div class="th" style="width: 25%">题目</div>
        <div class="th" style="width: 10%">分类</div>
        <div class="th" style="width: 10%">类型</div>
        <div class="th" style="width: 10%">难度</div>
        <div class="th" style="width: 15%">答案比对</div>
        <div class="th" style="width: 10%">结果</div>
        <div class="th" style="width: 20%">答题时间</div>
      </div>
      
      <div v-if="loading" class="loading">
        <a-spin />
      </div>
      
      <template v-else>
        <div v-for="item in list" :key="item.id" class="table-row">
          <div class="td" style="width: 25%" :title="item.subjectName">
            {{ item.subjectName }}
          </div>
          <div class="td" style="width: 10%">{{ item.categoryName }}</div>
          <div class="td" style="width: 10%">{{ item.subjectTypeName }}</div>
          <div class="td" style="width: 10%">{{ item.subjectLevelName }}</div>
          <div class="td" style="width: 15%">
            <a class="compare-link" @click="showAnswerCompare(item)">答案比对</a>
          </div>
          <div class="td" style="width: 10%">
            <span class="result-tag" :class="item.isRight === '1' ? 'error' : 'success'">
              {{ item.isRight === '1' ? '错误' : '正确' }}
            </span>
          </div>
          <div class="td" style="width: 20%">{{ item.createTime }}</div>
        </div>
      </template>

      <!-- 分页 -->
      <div class="pagination">
        <a-pagination
          :current="queryParams.page"
          :pageSize="queryParams.pageSize"
          :total="total"
          show-size-changer
          show-quick-jumper
          :show-total="total => `共 ${total} 条记录`"
          @change="handlePageChange"
        />
      </div>
    </div>

    <!-- 答案比对弹窗 -->
    <a-modal
      v-model:visible="modalVisible"
      title="答案比对"
      width="800px"
      :footer="null"
      :destroyOnClose="true"
      :keyboard="true"
      :maskClosable="true"
      wrapClassName="answer-modal"
      @cancel="handleModalClose"
    >
      <template #closeIcon>
        <span class="modal-close" @click="handleModalClose" tabindex="0" role="button" aria-label="关闭">
          <close-outlined />
        </span>
      </template>
      
      <div v-if="currentRecord" class="answer-compare" role="dialog" aria-modal="true">
        <div class="answer-item">
          <div class="answer-header" role="heading" aria-level="1">
            <span class="answer-tag my-answer" :class="currentRecord.isRight === '1' ? 'error' : 'success'">
              我的答案
            </span>
          </div>
          <div 
            class="answer-content" 
            :class="{ 'wrong': currentRecord.isRight === '1' }"
            role="article"
          >
            {{ currentRecord.recordAnswer }}
          </div>
        </div>
        <div class="answer-item">
          <div class="answer-header" role="heading" aria-level="1">
            <span class="answer-tag correct-answer">
              正确答案
            </span>
          </div>
          <div 
            class="answer-content"
            role="article"
          >
            {{ currentRecord.rightAnswer }}
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { request } from '@/utils/request'
import { message } from 'ant-design-vue'
import { CloseOutlined } from '@ant-design/icons-vue'

export default {
  name: 'PracticeRecord',
  components: {
    CloseOutlined
  },
  
  data() {
    return {
      loading: false,
      dateRange: [],
      list: [],
      total: 0,
      modalVisible: false,
      currentRecord: null,
      queryParams: {
        isRight: '',
        startTime: '',
        endTime: '',
        page: 1,
        pageSize: 10
      }
    }
  },

  mounted() {
    this.getList()
  },

  methods: {
    async getList() {
      this.loading = true
      try {
        const res = await request.post('/subject/solve/queryRecord', this.queryParams)
        if (res.code === 200) {
          this.list = res.content.list
          this.total = parseInt(res.content.total)
        } else {
          message.error(res.message || '获取记录失败')
        }
      } catch (error) {
        message.error('获取记录失败')
      } finally {
        this.loading = false
      }
    },

    onDateChange(dates, dateStrings) {
      [this.queryParams.startTime, this.queryParams.endTime] = dateStrings
    },

    handleQuery() {
      this.queryParams.page = 1
      this.getList()
    },

    resetQuery() {
      this.dateRange = []
      this.queryParams = {
        isRight: '',
        startTime: '',
        endTime: '',
        page: 1,
        pageSize: 10
      }
      this.getList()
    },

    handlePageChange(page, pageSize) {
      this.queryParams.page = page
      this.queryParams.pageSize = pageSize
      this.getList()
    },

    showAnswerCompare(record) {
      this.currentRecord = record
      this.modalVisible = true
    },

    handleModalClose() {
      this.modalVisible = false
      this.currentRecord = null
    }
  }
}
</script>

<style lang="scss" scoped>
.practice-record {
  padding: 24px;
  background: #fff;

  .search-form {
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;

    .form-item {
      display: flex;
      align-items: center;

      .label {
        margin-right: 8px;
        white-space: nowrap;
      }
    }
  }

  .record-table {
    border: 1px solid #f0f0f0;
    border-radius: 2px;

    .table-header {
      display: flex;
      background: #fafafa;
      border-bottom: 1px solid #f0f0f0;

      .th {
        padding: 16px;
        font-weight: 500;
        text-align: center;
        color: #1f2937;
        
        &:not(:last-child) {
          border-right: 1px solid #f0f0f0;
        }
      }
    }

    .table-row {
      display: flex;
      border-bottom: 1px solid #f0f0f0;
      
      &:hover {
        background: #fafafa;
      }

      .td {
        padding: 16px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #374151;
        
        &:not(:last-child) {
          border-right: 1px solid #f0f0f0;
        }

        &:first-child {
          justify-content: flex-start;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .compare-link {
          color: #1890ff;
          font-weight: 500;
          cursor: pointer;

          &:hover {
            color: #40a9ff;
          }
        }

        .result-tag {
          display: inline-block;
          padding: 4px 12px;
          border-radius: 4px;
          font-weight: 500;
          font-size: 14px;

          &.success {
            background: #e6f7e6;
            color: #389e0d;
            border: 1px solid #b7eb8f;
          }

          &.error {
            background: #fff2f0;
            color: #ff4d4f;
            border: 1px solid #ffccc7;
          }
        }
      }
    }

    .loading {
      padding: 48px 0;
      display: flex;
      justify-content: center;
    }

    .pagination {
      padding: 16px;
      text-align: right;
      border-top: 1px solid #f0f0f0;
    }
  }

  :deep(.answer-modal) {
    .ant-modal-content {
      border-radius: 8px;
      overflow: hidden;
    }

    .ant-modal-header {
      border-bottom: 1px solid #f0f0f0;
      padding: 16px 24px;
    }

    .ant-modal-body {
      padding: 24px;
    }

    .modal-close {
      cursor: pointer;
      padding: 8px;
      border-radius: 4px;
      transition: background-color 0.3s;

      &:hover {
        background-color: rgba(0, 0, 0, 0.04);
      }

      &:focus {
        outline: 2px solid #1890ff;
        outline-offset: 2px;
      }
    }
  }

  .answer-compare {
    .answer-item {
      margin-bottom: 24px;

      &:last-child {
        margin-bottom: 0;
      }

      .answer-header {
        margin-bottom: 12px;

        .answer-tag {
          display: inline-block;
          padding: 6px 16px;
          border-radius: 4px;
          font-weight: 500;
          font-size: 14px;

          &.my-answer {
            &.success {
              background: #e6f7e6;
              color: #389e0d;
              border: 1px solid #b7eb8f;
            }

            &.error {
              background: #fff2f0;
              color: #ff4d4f;
              border: 1px solid #ffccc7;
            }
          }

          &.correct-answer {
            background: #e6f7e6;
            color: #389e0d;
            border: 1px solid #b7eb8f;
          }
        }
      }

      .answer-content {
        padding: 16px;
        background: #fafafa;
        border-radius: 4px;
        white-space: pre-wrap;
        word-break: break-all;
        line-height: 1.8;
        font-size: 14px;
        color: #1f2937;
        
        &.wrong {
          background: #fff2f0;
          border: 1px solid #ffccc7;
        }
      }
    }
  }
}
</style>

